<template>
  <div>
    <!-- 头部 -->
    <template v-if="showTab">
      <windowTab obj="home">
        <p class="px-2">新的朋友</p>
      </windowTab>
    </template>
    <!-- 内容 -->
    <div class="w-full h-[calc(100vh-32px)] overflow-y-scroll border-t border-[var(--border)]">
      <div class="max-w-[80%] min-w-[500px] h-full mx-auto" v-if="requestFriendList.length != 0">
        <div
          v-for="(item, index) in requestFriendList"
          :key="index"
          class="w-full border-b border-[var(--border)] pb-[15px] my-[15px]"
        >
          <!-- 添加时间 -->
          <p class="text-center text-fontPlaceholde text-xs">
            {{ FormatTime(item.createdAt) }}
          </p>
          <!-- 头像和用户名 -->
          <div class="flex flex-row justify-between items-center gap-4">
            <div class="flex flex-row items-center gap-4">
              <n-avatar :src="item.Request.avatar" />
              <div>
                <p class="text-base text-fontRegular">{{ item.Request.name }}</p>
                <p class="text-xs text-fontSecondary">{{ item.description }}</p>
              </div>
            </div>
            <!-- 接受按钮 -->
            <div>
              <el-button :disabled="item.status != 0" size="small" type="success" @click="HandelRequest(item)"
                >{{ ButtonName(item.status) }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full h-full flex flex-col justify-center items-center" v-else>
        <n-empty size="huge" description="暂无添加记录"> </n-empty>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { FriendState, IRequestListItem } from "@/types/friend";
import { ChatType, MessageType } from "@/types/chat";
import { useCache } from "@/store/modules/cache";
import { AgreeFriend, GetReqFriendList } from "@/api/friend.ts";
import { FormatTime } from "@/utils/time";
import { MessageStrategyMap } from "@/tactics/message";
import { ElMessage } from "element-plus";
import { NAvatar, NEmpty } from "naive-ui";
import windowTab from "@/components/WindowTab/index.vue";

const cache = useCache();
let requestFriendList = ref<IRequestListItem[]>([]);

const ButtonName = computed(() => {
  return (status: number) => {
    if (status === FriendState.wait) return "添加";
    if (status === FriendState.aggre) return "已经是好友";
    if (status === FriendState.reject) return "已被拒绝";
    return "";
  };
});

withDefaults(
  defineProps<{
    showTab?: boolean;
  }>(),
  {
    showTab: false,
  },
);

// 获取好友请求列表
async function ReqFriendList() {
  let res = await GetReqFriendList();
  if (!res) return;
  requestFriendList.value = res.data;
}

// 添加好友
async function HandelRequest(item: IRequestListItem) {
  let res = await AgreeFriend({
    userId: item.receiverId,
    friendId: item.requestId,
  });
  if (res?.status != 200) {
    ElMessage.error("添加好友出现错误...");
    return;
  }
  item.status = FriendState.aggre;
  const { sessionId } = res.data;
  await cache.GetUserFriendList();
  const strategy = MessageStrategyMap[MessageType.text];
  let message = strategy.mergeData({
    sendId: item.receiverId,
    toId: item.requestId,
    sessionId: sessionId,
    chatType: ChatType.friend,
    content: "我们已经是好友了开始聊天吧",
  });
  strategy.sendMessage(message);
}

ReqFriendList();
</script>

<style lang="scss" scoped></style>
